<template>
  <div>
    <div
      class="item"
      :dataSource="dataSource"
      v-for="(item, index) in dataSource"
      :key="index"
    >
      <div class="icon">
        <SoundTwoTone :style="{ fontSize: '40px', color: '#08c' }" />
      </div>
      <div>
        <p class="type">{{ item.notice_cate }}</p>
        <p class="time">{{ item.notice_time }}</p>
        <div class="content">
          {{ item.notice_content }}
        </div>
      </div>
    </div>
    <a-pagination
      class="pag"
      v-model:current="current"
      v-model:page-size="pageSize"
      :defaultCurrent="1"
      :defaultPageSize="3"
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      @change="onChange"
      @showSizeChange="onShowSizeChange"
      :show-total="(total) => `共 ${total} 条`"
    />
  </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
import { SoundTwoTone, RadarChartOutlined } from '@ant-design/icons-vue'
import {
  Space,
  Table,
  Pagination,
  message,
  Button,
  Modal,
  Form,
  Input,
} from 'ant-design-vue'
const current = ref(1)
const pageSize = ref(3)
const pageSizeRef = ref(3)
const pageSizeOptions = ref(['3', '6', '9'])
const total = ref(0)
const dataSource = ref([])
onMounted(() => {
  ///events/font
  showTable(1, 3)
})
const showTable = (page, size) => {
  axios
    .get('http://localhost:3000/notice/font', {
      params: {
        page, //当前页
        size, //一页几条
      },
    })
    .then((res) => {
      console.log(res)
      const events = res.data.result
      total.value = res.data.total
      dataSource.value = events
    })
}
const onShowSizeChange = (current, pageSize) => {
  console.log(current, pageSize)
  pageSizeRef.value = pageSize
}
const onChange = (pageNumber, pageSize) => {
  //显示现在是第几页,一页几条
  console.log(pageNumber, pageSize)
  showTable(pageNumber, pageSize)
}
</script>

<style scoped>
.item {
  display: flex;
  padding: 15px;
  border: 1px skyblue solid;
  border-radius: 20px;
  width: 380px;
  margin: 0 auto;
  margin-top: 5%;
}
.icon {
  margin-right: 20px;
}
.type {
  /* overflow: hidden; */
  font-size: 25px;
  height: 10px;
}
.time {
  font-size: 13px;
  color: #999;
  height: 15px;
}
.radius {
  font-size: 20px;
  margin-left: 5px;
  color: rgb(255, 42, 0);
}
.content {
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  height: 100px;
  width: 280px;
  padding: 5px 10px;
  background: #eeeeee;
  color: #5a5a5a;
  line-height: 30px;
  font-size: 18px;
  border-radius: 10px;
  text-indent: 2em;
}
/* .content:hover {
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  color: #1890ff;
  cursor: pointer;
} */
.pag {
  margin-top: 10px;
  width: 70%;
  /* background: pink; */
  margin: 0 auto;
}
</style>
